<template>
  <div :class="[inline ? 'container-horizontal' : 'container-vertical']">
    <!-- 上传附件协议盒子 -->
    <el-upload
      ref="uploadRef"
      style="cursor: pointer"
      :http-request="uploadFile"
      :before-upload="beforeUpload"
      :show-file-list="false"
      list-type="picture-card"
      :limit="limit + 1"
      :multiple="multiple"
    >
      <template #default>
        <el-icon>
          <Upload />
        </el-icon>
        <span>{{ uploadName }}</span>
      </template>
    </el-upload>
    <div v-if="showTips" class="upload-tips">
      <div class="upload-tips-type">
        <span style="color: red">*</span>{{ uploadName }}
      </div>
      <div>
        最多支持上传{{ limit }}个文件，单个{{ size }}M以内，支持上传
        {{ typeList.join("、") }}
      </div>
    </div>
  </div>
  <div style="margin-top: 15px">
    <uc-down-file
      v-model="uploadList"
      :view-btn="viewBtn"
      :down-btn="downBtn"
      :show-img="showImg"
      :del-btn="delBtn"
    ></uc-down-file>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";
const $emit = defineEmits(["update:modelValue", "handle-change"]);
const uploadRef = ref(null);
const props = defineProps({
  // 附件列表
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  // 是否显示提示文字
  showTips: {
    type: Boolean,
    default: true,
  },
  // 提示文字的排列方式
  inline: {
    type: Boolean,
    default: true,
  },
  // 是否支持多选
  multiple: {
    type: Boolean,
    default: false,
  },
  // 上传文件名称说明
  uploadName: {
    type: String,
    default: "上传图片",
  },
  // 允许上传文件的最大数量
  limit: {
    type: Number,
    default: 5,
  },
  // 允许上传文件的类型
  typeList: {
    type: Array,
    default: () => {
      return [
        "pdf",
        "doc",
        "docx",
        "zip",
        "rar",
        "xls",
        "xlsx",
        "jpg",
        "jpeg",
        "png",
      ];
    },
  },
  // 单个文件大小
  size: {
    type: [Number, String],
    default: 10,
  },
  // 是否显示查看按钮
  viewBtn: {
    type: Boolean,
    default: true,
  },
  // 是否显示下载按钮
  downBtn: {
    type: Boolean,
    default: false,
  },
  // 是否显示图片小图标
  showImg: {
    type: Boolean,
    default: false,
  },
  // 是否显示删除按钮
  delBtn: {
    type: Boolean,
    default: true,
  },
});

const uploadList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
    uploadRef.value.clearFiles();
  },
});

const beforeUpload = (rawFile) => {
  if (uploadList.value.length >= props.limit) {
    ElMessage.error(`最多支持上传${props.limit}个文件`);
    return false;
  }

  let type = rawFile.name
    .split(".")
    [rawFile.name.split(".").length - 1].toLocaleLowerCase();

  if (!props.typeList.includes(type)) {
    ElMessage.error("不支持当前格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > props.size) {
    ElMessage.error(`单个文件限${props.size}M以内!`);
    return false;
  }
  return true;
};

// 上传
const uploadFile = async (data) => {
  const obj = await handleUploadsave(data.file);
  uploadList.value.push({
    url: obj.url,
    ossUrl: obj.url,
  });
  $emit("handle-change", uploadList.value);
  ElMessage.success("上传成功！");
};
defineExpose({
  uploadList,
});
</script>

<style lang="scss" scoped>
.container-horizontal {
  display: flex;

  .upload-tips {
    flex: 1;
    margin-left: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.container-vertical {
  .upload-tips {
    margin-top: 10px;
    margin-left: 5px;
  }
}

.upload-tips {
  color: #aaa;
  font-size: 14px;
}

.upload-tips-type {
  margin-bottom: 12px;
}

.upload-item {
  display: flex;
  align-items: center;
  margin-top: 12px;
  height: 36px;
  line-height: 36px;
  border-radius: 6px;
  background-color: #f4f4f4;
  padding: 0 13px;
  font-size: 14px;
  color: #555;

  .upload-item-file {
    display: flex;
    align-items: center;
  }

  .upload-item-btns {
    margin-left: auto;

    & > a {
      margin-left: 10px;
    }
  }
}
</style>
